import React from "react";

class App extends React.Component {
  state = {
    name: "张三",
  };

  constructor(props) {
    super(props);

    // this.fn1 = this.fn1.bind(this);
  }

  // 函数，给到按钮的点击事件去用，它就是个事件处理函数了
  //    这个函数不是我们主动调用的，而是 React 内部在事件触发时帮我们调用的。
  //    正常来说，这个函数内部的 this 指向应该是 window,
  //    但是 class 中的函数，会自动添加上 use strict ，所以会导致 this 指向 undefined
  //    ? render 函数也不是我们自己调用的，为什么它的this没问题了？因为render函数内部做了额外的处理
  fn1() {
    console.log("fn1", this);
    this.setState({
      name: "李四",
    });
  }

  // fn2() {
  //   console.log("fn2", this);
  // }

  fn2 = () => {
    console.log("fn2", this);
  };

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.fn1}>点我</button>

        <p>1. 在 jsx 中，通过 bind 来修改 this 指向</p>
        <button onClick={this.fn1.bind(this)}>点我</button>

        <p>2. 提前在 构造函数中 通过 bind 来修改 this 指向</p>
        <button onClick={this.fn1}>点我</button>

        <p>
          3. 在 jsx
          中，直接使用箭头函数来做为事件处理函数，然后在箭头函数内部调用抽离的普通函数
        </p>
        <button
          onClick={() => {
            console.log("onCLick", this);
            this.fn1();
          }}
        >
          点我
        </button>

        <p>
          4. 使用 箭头函数 + public class fileds 语法来定义这个事件处理函数。
        </p>

        <button onClick={this.fn2}>点我</button>
      </div>
    );
  }
}

export default App;
